<template>
	<view class="warp">
		<view class="info">
			<view class="info-left">
				<view class="">
					我的K币
				</view>
				<text class="num">{{book_currency}}</text>
			</view>
			<view class="info-right">
				<van-button v-if="iosFlag == true" type="primary" round color="orange" size="normal" @click="goCost">
					立刻充值></van-button>
			</view>
		</view>
		<view class="uni-list">
			<uni-list :border="false">
				<uni-list-item title="自定义右侧插槽" @click="onClick(item)" link v-for="(item,index) in list" :key="index">
					<template slot="header">
						<image class="slot-image" :src="item.icon" mode="widthFix"></image>
					</template>
					<view slot="body" class="slot-box">{{item.title}}</view>
				</uni-list-item>
			</uni-list>
		</view>
		<van-popup :show="show" position="bottom" custom-style="height: auto;padding:20px 10px 4px 10px;"
			@close="onClose" :safe-area-inset-bottom="true">
			<view>
				充值K币
			</view>
			<view class="weixin-box">
				<view class="">
					<image src="../../static/weixin.png" mode=""></image>
					<text>微信充值</text>
				</view>
				<view class="">
					账户余额：<text style="color: orange;margin-right: 8rpx;">{{book_currency}}</text> K币
				</view>
			</view>
			<view class="view-list">
				<view v-for="(item,index) in cateList" :key="index" :class="{active: index === current}"
					@click="selectCate(item,index)">
					<view class="num1">
						{{item.name}}
					</view>
					<view class="">
						<text>{{item.original_currency}}</text>
						<text class="tip" v-if="item.send_currency.length>0">+{{item.send_currency}}</text>
					</view>
					<view class="content">
						{{item.send_title}}
					</view>
					<view class="saleStyle" v-if="item.label.length>0">
						<text class="saleText">{{item.label}}</text>
					</view>
				</view>
				<!-- <view class="popup-bottom">
					<text>会员充值可获赠更多K币</text>
					<van-button color="linear-gradient(to right, #f7e622, #b8ae18)" round size="normal"
						@click="goDetails">
						去开通
					</van-button>
				</view> -->
			</view>
			<view class="openHuiyuan" @click="goCostSale">
				立即充值
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		getBookorder,
		getBookGold,
		getMoneyList
	} from '@/module/index.js'
	const app = getApp()
	export default {
		data() {
			return {
				costObj: null,
				iosFlag: app.globalData.iosFlag,
				book_currency: 0.00,
				show: false,
				current: 0,
				list: [{
						title: `充值记录`,
						icon: `../../static/chongzhijilu.png`
					},
					{
						title: `消费记录`,
						icon: `../../static/xiaofeijilu.png`
					}
				],
				cateList: []
			}
		},
		onLoad(e){
			uni.setStorageSync('login_message', {
				official_account_id:e?.official_account_id,
				uid:e?.uid,
				video_id:e?.video_id
			})
		},
		onShow() {
			this.getMoneyList()
			this.getBookGold()
		},
		methods: {
			onClick(el) {
				console.log(el.title)
				if (el.title == "充值记录") {
					uni.navigateTo({
						url: "/wxcomponents/Recharge/index"
					})
				} else {
					uni.navigateTo({
						url: "/wxcomponents/consumption/index"
					})
				}
			},
			goCost() {
				if (this.hasUserInfo == false) {
					uni.showToast({
						title: '您还没有登录',
						icon: 'none'
					});
				} else {
					this.show = true
					uni.hideTabBar()
				}
			},
			onClose() {
				this.show = false
				setTimeout(function() {
					uni.showTabBar()
				}, 500);
			},
			goDetails() {
				uni.navigateTo({
					url: `/wxcomponents/MembershipCenter/MembershipCenter`,
					fail() {
						uni.switchTab({
							url: `/wxcomponents/MembershipCenter/MembershipCenter`,
							fail() {
								uni.showToast({
									title: '敬请期待',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			getBookorder(item) {
				let obj = {
					total_fee: item.name * 100,
					name: item.name,
					number: item.sum_currency
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						console.log(res.data)
						var record_id = res.data.pay_record_id
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success(res) {
								console.log(res)
								self.show = false
								setTimeout(function() {
									self.getBookGold()
								}, 1000);
							},
							fail(err) {
								console.log(err)
								if (err.errMsg = "requestPayment:fail cancel") {
									uni.showToast({
										title: `取消支付`,
										icon: 'none'
									});
								} else {
									uni.showToast({
										title: `支付失败`,
										icon: 'none'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getBookGold() {
				getBookGold().then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.book_currency = res.data.money
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 微信支付
			selectCate(item, index) {
				console.log(item.money)
				this.current = index
				this.costObj = item
			},
			goCostSale() {
				this.getBookorder(this.cateList[this.current])
			},
			getMoneyList() {
				getMoneyList().then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.cateList = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.warp {
		padding: 0px 20rpx;
	}

	.info {
		border: 1px solid #BEBEBE;
		display: flex;
		justify-content: space-between;
		height: 220rpx;
		align-items: center;
		padding: 0rpx 20rpx;
		margin-bottom: 20rpx;
	}

	.num {
		color: orange;
		font-weight: bold;
	}

	.slot-image {
		width: 45rpx;
		height: 45rpx;
		vertical-align: middle;
	}

	.slot-box {
		margin-left: 20rpx;
	}

	.view-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.view-list>.active {
		border: 1px solid #D9D9D9;
		background-color: #e21f0d;
		opacity: 0.8;
		color: #fff;
	}

	.view-list:after {
		display: block;
		content: "";
		width: 44%;
		height: 0px;
	}

	.view-list>view {
		width: 44%;
		padding: 10rpx 0rpx;
		border: 1px solid #d9d9d9;
		text-align: center;
		margin: 20rpx 0rpx;
		position: relative;
		overflow: hidden;
	}

	.saleStyle {
		position: absolute;
		top: 0rpx;
		right: -78rpx;
		width: 0rpx;
		height: 0rpx;
		border: 76rpx solid #000;
		border-color: #000000 transparent transparent transparent;
		color: #FFFFFF;
	}

	.saleText {
		position: absolute;
		top: -68rpx;
		right: -2rpx;
		font-size: 20rpx;
		width: 30px;
		transform: rotate(45deg);
	}

	.weixin-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.view-list>.popup-bottom {
		background-color: #808080;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0px 20rpx;
	}

	.tip {
		color: #df851d;
	}

	.num1 {
		/* font-size: 40rpx;
		font-weight: 900; */
	}

	.content {
		color: #df851d;
		font-size: 30rpx;
	}

	image {
		width: 60px;
		height: 60px;
		vertical-align: middle;
	}

	.openHuiyuan {
		text-align: center;
		color: #FFFFFF;
		background-color: #F25011;
		margin-top: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
